<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科技商品管理系统</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

        :root {
            --neon-pink: #ff2a6d;
            --neon-blue: #05d9e8;
            --neon-purple: #d300c5;
            --neon-green: #00ff9d;
            --dark-bg: #0d0221;
            --darker-bg: #05010e;
        }

        body {
            font-family: 'Share Tech Mono', monospace;
            margin: 0;
            padding: 20px;
            background-color: var(--dark-bg);
            color: var(--neon-blue);
            overflow-x: hidden;
            position: relative;
        }

        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                    linear-gradient(rgba(5, 217, 232, 0.1) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(5, 217, 232, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            z-index: -1;
            pointer-events: none;
        }

        body::after {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                    linear-gradient(transparent 65%, rgba(13, 2, 33, 0.95) 95%),
                    linear-gradient(90deg, var(--neon-pink), var(--neon-blue), var(--neon-purple));
            background-size: 100% 100%, 200% 200%;
            animation: gradient 15s ease infinite;
            z-index: -2;
            opacity: 0.15;
            pointer-events: none;
        }

        @keyframes gradient {
            0% { background-position: 0% 0%, 0% 50%; }
            50% { background-position: 0% 0%, 100% 50%; }
            100% { background-position: 0% 0%, 0% 50%; }
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            background-color: rgba(13, 2, 33, 0.85);
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 15px var(--neon-purple);
            border: 1px solid var(--neon-blue);
            position: relative;
            overflow: hidden;
        }

        .container::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 2px solid var(--neon-pink);
            border-radius: 8px;
            animation: glitch 5s linear infinite;
            opacity: 0.3;
            pointer-events: none;
        }

        @keyframes glitch {
            0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
            5% { clip-path: polygon(0 5%, 100% 15%, 100% 95%, 0 85%); }
            10% { clip-path: polygon(0 15%, 100% 5%, 100% 85%, 0 95%); }
            15% { clip-path: polygon(0 25%, 100% 25%, 100% 75%, 0 75%); }
            20% { clip-path: polygon(0 35%, 100% 45%, 100% 65%, 0 55%); }
            25% { clip-path: polygon(0 45%, 100% 35%, 100% 55%, 0 65%); }
            30% { clip-path: polygon(0 55%, 100% 65%, 100% 45%, 0 35%); }
            35% { clip-path: polygon(0 65%, 100% 55%, 100% 35%, 0 45%); }
            40% { clip-path: polygon(0 75%, 100% 75%, 100% 25%, 0 25%); }
            45% { clip-path: polygon(0 85%, 100% 95%, 100% 5%, 0 15%); }
        }

        h1, h2 {
            color: var(--neon-green);
            text-align: center;
            text-shadow: 0 0 10px var(--neon-green);
            animation: neon-flicker 2s infinite alternate;
        }

        h1 {
            font-size: 2.5em;
            margin-bottom: 20px;
        }

        h2 {
            font-size: 1.8em;
            margin-bottom: 15px;
        }

        @keyframes neon-flicker {
            0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
                text-shadow: 0 0 10px var(--neon-green);
            }
            20%, 24%, 55% {
                text-shadow: 0 0 5px var(--neon-green),
                0 0 10px var(--neon-green),
                0 0 15px var(--neon-green);
            }
        }

        .products {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .product-card {
            border: 1px solid var(--neon-blue);
            border-radius: 5px;
            padding: 20px;
            background-color: rgba(5, 217, 232, 0.05);
            box-shadow: 0 0 10px rgba(5, 217, 232, 0.3);
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
        }

        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 15px var(--neon-pink);
            border-color: var(--neon-pink);
        }

        .product-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                    135deg,
                    transparent 0%,
                    rgba(255, 42, 109, 0.1) 50%,
                    transparent 100%
            );
            pointer-events: none;
        }

        .product-name {
            font-size: 1.3em;
            font-weight: bold;
            margin-bottom: 10px;
            color: var(--neon-blue);
            text-shadow: 0 0 5px var(--neon-blue);
        }

        .product-description {
            color: rgba(5, 217, 232, 0.8);
            margin-bottom: 15px;
            line-height: 1.5;
        }

        .product-price {
            font-weight: bold;
            font-size: 1.3em;
            margin-bottom: 10px;
            color: var(--neon-green);
            text-shadow: 0 0 5px var(--neon-green);
        }

        .product-stock {
            font-size: 1.1em;
        }

        .stock-normal {
            color: var(--neon-blue);
            text-shadow: 0 0 5px var(--neon-blue);
        }

        .stock-low {
            color: var(--neon-pink);
            text-shadow: 0 0 5px var(--neon-pink);
            animation: pulse 1s infinite alternate;
        }

        @keyframes pulse {
            from { opacity: 0.7; }
            to { opacity: 1; }
        }

        .add-form {
            margin-top: 40px;
            background-color: rgba(5, 217, 232, 0.1);
            padding: 25px;
            border-radius: 5px;
            border: 1px solid var(--neon-blue);
            box-shadow: 0 0 10px rgba(5, 217, 232, 0.3);
        }

        .form-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: var(--neon-blue);
        }

        input, textarea {
            width: 100%;
            padding: 10px;
            background-color: rgba(5, 217, 232, 0.1);
            border: 1px solid var(--neon-blue);
            border-radius: 4px;
            color: var(--neon-green);
            font-family: 'Share Tech Mono', monospace;
            font-size: 1em;
            transition: all 0.3s;
        }

        input:focus, textarea:focus {
            outline: none;
            border-color: var(--neon-pink);
            box-shadow: 0 0 10px var(--neon-pink);
        }

        button {
            background-color: var(--neon-green);
            color: var(--darker-bg);
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1.1em;
            font-weight: bold;
            font-family: 'Share Tech Mono', monospace;
            text-transform: uppercase;
            letter-spacing: 1px;
            transition: all 0.3s;
            box-shadow: 0 0 10px var(--neon-green);
            width: 100%;
        }

        button:hover {
            background-color: var(--neon-blue);
            box-shadow: 0 0 15px var(--neon-blue);
            transform: translateY(-2px);
        }

        /* 扫描线效果 */
        .scanlines {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                    to bottom,
                    transparent 95%,
                    rgba(255, 255, 255, 0.05) 96%
            );
            background-size: 100% 4px;
            z-index: -1;
            pointer-events: none;
            animation: scanline 8s linear infinite;
        }

        @keyframes scanline {
            0% { background-position: 0 0; }
            100% { background-position: 0 100%; }
        }

        @media (max-width: 768px) {
            .container {
                padding: 15px;
            }

            .products {
                grid-template-columns: 1fr;
            }

            .product-card {
                padding: 15px;
            }

            h1 {
                font-size: 2em;
            }

            h2 {
                font-size: 1.5em;
            }
        }
    </style>
</head>
<body>
<div class="scanlines"></div>

<div class="container">
    <h1>科技商品管理系统</h1>
    <div id="productsList" class="products">
    </div>

    <div class="add-form">
        <h2>添加新商品</h2>
        <form id="addProductForm">
            <div class="form-group">
                <label for="name">商品名称</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="description">商品描述</label>
                <textarea id="description" name="description" rows="3" required></textarea>
            </div>
            <div class="form-group">
                <label for="price">价格</label>
                <input type="number" id="price" name="price" step="0.01" min="0" required>
            </div>
            <div class="form-group">
                <label for="stock">库存</label>
                <input type="number" id="stock" name="stock" min="0" required>
            </div>
            <button type="submit">添加商品</button>
        </form>
    </div>
</div>

<script>
    window.onload = function() {
        const mockProducts = [
            {
                id: 1,
                name: "iPhone 15 Pro",
                description: "6.1英寸Super Retina XDR显示屏，A17 Pro芯片",
                price: 8999.00,
                stock: 15
            },
            {
                id: 2,
                name: "AirPods Pro (第二代)",
                description: "主动降噪无线蓝牙耳机，空间音频",
                price: 1899.00,
                stock: 8
            },
            {
                id: 3,
                name: "MacBook Pro 14英寸",
                description: "M2 Pro芯片，16GB内存，512GB SSD",
                price: 14999.00,
                stock: 3
            },
            {
                id: 4,
                name: "iPad Pro 12.9英寸",
                description: "M2芯片，Liquid视网膜XDR显示屏",
                price: 9299.00,
                stock: 12
            },
            {
                id: 5,
                name: "Apple Watch Ultra",
                description: "49mm钛金属表壳，精准定位功能",
                price: 6299.00,
                stock: 7
            }
        ];

        renderProducts(mockProducts);

        document.getElementById('addProductForm').addEventListener('submit', function(e) {
            e.preventDefault();
            addProduct();
        });
    };

    function renderProducts(products) {
        const productsContainer = document.getElementById('productsList');
        productsContainer.innerHTML = '';

        products.forEach(product => {
            const productCard = document.createElement('div');
            productCard.className = 'product-card';

            const stockClass = product.stock < 5 ? 'stock-low' : 'stock-normal';

            productCard.innerHTML = `
                    <div class="product-name">${product.name}</div>
                    <div class="product-description">${product.description}</div>
                    <div class="product-price">¥${product.price.toFixed(2)}</div>
                    <div class="product-stock ${stockClass}">库存: ${product.stock} 件</div>
                `;

            productsContainer.appendChild(productCard);
        });
    }

    function fetchProducts() {
        fetch('/api/products')
            .then(response => response.json())
            .then(data => {
                renderProducts(data);
            })
            .catch(error => {
                console.error('获取产品数据时出错:', error);
                console.log('使用模拟数据作为回退');
                window.onload();
            });
    }

    function addProduct() {
        const form = document.getElementById('addProductForm');
        const product = {
            name: form.name.value,
            description: form.description.value,
            price: parseFloat(form.price.value),
            stock: parseInt(form.stock.value)
        };

        fetch('/api/products', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(product)
        })
            .then(response => response.json())
            .then(data => {
                console.log('添加产品成功:', data);
                form.reset();
                fetchProducts();
            })
            .catch(error => {
                console.error('添加产品时出错:', error);
            });
    }
</script>
</body>
</html>